<template lang="">
	<div class="container">
		<div class="box-container">
			<div class="box-item" v-for="(item,index) in list" :key="index" @click="navigateToDetail(item)">
				<div class="title">
					<span class="text">{{ item.title }}</span> 
					<span class="label hot" v-if="item.topping">热门</span>
					<span class="label new" v-if="item.newFlag">最新</span>
				</div>
				<div class="time">发布于 {{item.gmtUpdate}}</div>
			</div>
		</div>
		<div>
		<u-divider v-if="total == list.length" style="position: absolute;bottom: 36rpx" text="到底了，没更多信息了！"></u-divider>
		</div>
	</div>
</template>
<script>
import { queryInformationByPage } from '../../apis';
export default {
	data() {
		return {
			list: [],
			params: {
				pageSize: 10,
				pageNumber: 1,
			},
			total: 0
		}
	},
	mounted() {
		this.getAllInformation()
	},
	onReachBottom() {
		if (this.total < this.params.pageNumber * this.params.pageSize) return
		this.params.pageSize += 10
		this.getAllInformation()
	},
	onPullDownRefresh() {
		this.params.pageNumber = 1
		this.getAllInformation()
		uni.stopPullDownRefresh()
	},
	methods: {
		navigateToDetail(row) {
			uni.navigateTo({
				url: '/pages/announce/detail?id='+row.id
			})
		},
		getAllInformation() {
			queryInformationByPage(this.params).then((result) => {
				console.log('result: ', result);
				this.total = result.pageInfo.total
				this.list = result.data
			}).catch((err) => {

			});
		}
	}
}
</script>
<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100vh;
	background: #F5F5F5;
	position: relative;
	.box-container {
		padding: 20rpx 0;
		width: 100%;
    padding: 20rpx 0;
    background: #fff;
	}
	.box-item {
		padding: 30rpx 40rpx;
		display: flex;
		flex-flow: column;
		justify-content: space-between;
		border-bottom: 2rpx solid rgba(250, 250, 250, 1);
		.title {
			font-weight: 600;
			font-size: 32rpx;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			.text {
				max-width: 70%;
				display: inline-block;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}

		.time {
			color: rgba(156, 156, 156, 1);
			font-size: 24rpx;
		}
		.label {
			width: 60rpx;
			height: 32rpx;
			opacity: 1;
			border-radius: 10px;
			display: inline-block;
			color: #fff;
			font-size:20rpx;
			line-height: 32rpx;
			font-size: 20rpx;
			margin-left: 20rpx;
			text-align: center;
		}
		.label.hot {
			background: rgba(255, 170, 170, 1);
		}
		.label.new {
			background: rgba(144, 199, 255, 1);
		}
	}
}
</style>